<template>
  <view class="uni-calendar">
    <!-- 顶部标题栏 -->
    <view class="calendar-header">
      <text class="header-title">互联201</text>
    </view>

    <!-- 年月控制栏 -->
    <view class="control-bar">
      <text class="year-month">{{ currentYear }}年{{ currentMonth }}月</text>
      <button class="today-btn" @click="backToToday">回到今天</button>
    </view>

    <!-- 星期标题 -->
    <view class="week-header">
      <text class="week-day" v-for="day in weekDays" :key="day">{{ day }}</text>
    </view>

    <!-- 日期网格 -->
    <view class="date-grid">
      <uni-calendar-item
        v-for="(date, index) in calendarDays"
        :key="index"
        :date="date"
        :is-today="isToday(date)"
        :is-selected="isSelected(date)"
        @click="selectDate(date)"
      />
    </view>
  </view>
</template>

<script>
import { generateCalendar } from './calendar.js'
import UniCalendarItem from './uni-calendar-item.vue'

export default {
  components: {
    UniCalendarItem
  },
  data() {
    return {
      weekDays: ['日', '一', '二', '三', '四', '五', '六'],
      currentYear: 2022,
      currentMonth: 4,
      selectedDate: null
    }
  },
  computed: {
    calendarDays() {
      return generateCalendar(this.currentYear, this.currentMonth)
    }
  },
  methods: {
    isToday(date) {
      const today = new Date()
      return date.year === today.getFullYear() &&
             date.month === today.getMonth() + 1 &&
             date.day === today.getDate()
    },
    isSelected(date) {
      return this.selectedDate && 
             this.selectedDate.year === date.year &&
             this.selectedDate.month === date.month &&
             this.selectedDate.day === date.day
    },
    selectDate(date) {
      this.selectedDate = date
      this.$emit('change', date)
    },
    backToToday() {
      const today = new Date()
      this.currentYear = today.getFullYear()
      this.currentMonth = today.getMonth() + 1
      this.selectedDate = {
        year: today.getFullYear(),
        month: today.getMonth() + 1,
        day: today.getDate()
      }
    }
  }
}
</script>

<style scoped>
.uni-calendar {
  background: #fff;
  border-radius: 10rpx;
}

.calendar-header {
  background-color: #8a2be2;
  padding: 25rpx;
  color: white;
  text-align: center;
  font-weight: bold;
  font-size: 32rpx;
}

.control-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx;
  background: #f8f9fa;
  border-bottom: 1rpx solid #eee;
}

.year-month {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
}

.today-btn {
  background: #8a2be2;
  color: white;
  padding: 12rpx 24rpx;
  border-radius: 20rpx;
  font-size: 24rpx;
  border: none;
}

.week-header {
  display: flex;
  background: #f0f0f0;
}

.week-day {
  flex: 1;
  text-align: center;
  padding: 15rpx 0;
  font-size: 26rpx;
  color: #666;
}

.week-day:nth-child(1),
.week-day:nth-child(7) {
  color: #ff4444;
}

.date-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2rpx;
  background: #f0f0f0;
}
</style>